<template>
    <ul>
        <li v-for="item, index in modifiedItems" :key="index" class="titles">
            <div class="left">
                <!-- 仅在图标存在时才渲染 -->
                <i v-if="item.icon" :class="item.icon" class="icons"></i>

                <span>{{ item.title }}</span>
                <slot v-if="item.zj" name="right-content">
                    <span class="spanitems" style="color: #ccc;">{{ item.zj }}</span>
                </slot>
            </div>
            <div class="right">

                <!-- 插槽 -->
                <slot v-if="item.showSlot" name="right-content" :item="item"></slot>
                <slot v-if="item.rightButton" name="right-button">
                    <van-button size="small" style="margin-right: 0.1rem">修改手机号</van-button>
                </slot>
                <i v-if="item.right" :class="item.right" class="right-icons" @click="handleRightIconClick(item)"></i>
            </div>

        </li>
    </ul>
</template>

<script lang="ts" setup>
import { defineProps, computed } from 'vue';
import router from '@/router';

function handleRightIconClick(item: any) {
    console.log('右侧图标被点击了', item.title);
    
    if (item.title == '账号管理') {
        router.push('/changePasswordView/userGarnde');
    } else if (item.title == '修改密码') {
        console.log('进入修改密码判断'); // 调试日志
        router.push('/changePasswordView/changgeasswordView');
    } else {
        return;
    }
}


const props = defineProps<{
    items: Array < {
        title?: string;
        icon?: string; // 将图标设为可选属性
        right?: string;
        showSlot?: boolean;
        zj?: string,
        rightButton?: boolean
    } >
}>();


const modifiedItems = computed(() => {
    return props.items.map(item => {
        if (item.zj) {
            const phone = item.zj;
            // 确认手机号长度为11位
            if (phone.length === 11) {
                // 获取前三位和后三位，其余替换为*
                const maskedPhone = phone.slice(0, 3) + '****' + phone.slice(8);
                return {
                    ...item,
                    zj: maskedPhone // 替换后的手机号
                };
            }
        }
        return item; // 如果没有zj，返回原始项
    });
})
</script>

<style scoped lang="scss">
.titles {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
}

.left {
    padding: 0.15rem;
    font-size: 0.18rem;

    .icons {
        background: #3e64ff;
        color: white;
        border-radius: 50%;
        padding: 0.08rem;
        font-size: 0.18rem;
        margin-right: 0.05rem;
    }
}

.right {
    .right-icons {
        font-size: 0.15rem;
        padding-right: 0.04rem;
    }
}


.spanitems {
    margin-left: 0.5rem;
}
</style>
